<#include "/learn/utils/ui.ftl"/>
<@layout>
    <script type="text/javascript"
            src="${base}/dist/vendors/bootstrap/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
    <link rel="stylesheet" href="${base}/dist/vendors/bootstrap/plugins/bootstrap-switch/css/bootstrap-switch.min.css">
    <link rel="stylesheet" href="${base}/dist/vendors/timeline/timeline.css">
    <section class="content-header">
        <h1>设置复习计划</h1>
        <ol class="breadcrumb">
            <li><a href="${base}/learn">首页</a></li>
            <li class="active">设置复习计划</li>
        </ol>
    </section>
    <section class="content container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="timeline timeline-single-column">
                    <#list planSet as row>
                        <div>
                        <span class="timeline-label">
                            <span class="label label-info">${row.planName}</span>
                    </span>
                            <div class="timeline-item">
                                <div class="timeline-point timeline-point-success">
                                    <i class="fa fa-star"></i>
                                </div>
                                <div class="timeline-event timeline-event-success">
                                    <div class="timeline-heading">
                                        <h4>创建卡片后</h4>
                                    </div>
                                    <div class="timeline-body">
                                        <p>${row.timeShow}</p>
                                    </div>
                                    <div class="timeline-footer">
                                        <p class="text-right">
                                            <#if (row.status == '1')>
                                                <input type='checkbox' checked name='plan-set' data-id="${row.id}">
                                            <#else>
                                                <input type='checkbox' name='plan-set' data-id="${row.id}">
                                            </#if>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </#list>
                    <span class="timeline-label">
                        <button class="btn btn-danger"><i class="fa fa-ambulance"></i></button>
                </span>
                </div>
            </div>
        </div>
        </div>
    </section>
    <script type="text/javascript">
        var J = jQuery;

        function ajaxReload(json) {
            if (json.code >= 0) {
                if (json.message != null && json.message != '') {
                    layer.msg(json.message, {icon: 1});
                }
            } else {
                layer.msg(json.message, {icon: 2});
            }
        }

        function doUpdateStatus(id, status) {
            J.getJSON('${base}/learn/plan/status', J.param({'id': id, 'status': status}, true), ajaxReload);
        }

        $(function () {
            $("[name='plan-set']").bootstrapSwitch({
                onText: "启用",      // 设置ON文本
                offText: "禁用",    // 设置OFF文本
                onColor: "danger",// 设置ON文本颜色(info/success/warning/danger/primary)
                offColor: "default",  // 设置OFF文本颜色 (info/success/warning/danger/primary)
                size: "normal",    // 设置控件大小,从小到大  (mini/small/normal/large)
                // 当开关状态改变时触发
                onSwitchChange: function (event, state) {
                    var that = $(this);
                    if (state == true) {
                        console.log("ON");
                        doUpdateStatus(that.attr('data-id'), '1');
                    } else {
                        console.log("OFF");
                        doUpdateStatus(that.attr('data-id'), '0');
                    }

                }
            })
        })
    </script>
</@layout>